<template>
  <div class="bankCardInfo">
    <div class="header">
      <van-nav-bar title="银行卡信息" fixed left-text="返回" right-text left-arrow @click-left="goBack"/>
    </div>
    <section>
      <ul>
        <li>
          <p>微信账户</p>
          <input type="text" placeholder="请填写微信账户(必填)" v-model.trim="formData.weixinNum">
        </li>
        <li>
          <p>支付宝账户</p>
          <input type="text" placeholder="请填写支付宝账户(必填)" v-model.trim="formData.zhifubaoNum">
        </li>
        <li>
          <p>真实姓名</p>
          <input type="text" placeholder="请填写真实姓名" v-model.trim="formData.userName">
        </li>
        <li>
          <p>银行卡号码</p>
          <input type="text" placeholder="请填写银行卡卡号" v-model.trim="formData.bankNum">
        </li>
        <li>
          <p>银行卡开户行</p>
          <input type="text" placeholder="请填写银行卡开户行名称" v-model.trim="formData.openbank">
        </li>
      </ul>
      <van-checkbox v-model="checked" checked-color="#07c160">
        <p class="p">我同意以上填写的所有信息属实，并对虚假信息产生一切后果负责</p>
      </van-checkbox>
      <button @click="submit()">确定</button>
    </section>
  </div>
</template>

<script>
export default {
  name: "bankCardInfo",
  data() {
    return {
      checked: true,
      formData: {
        weixinNum: "",
        zhifubaoNum: "",
        userName: "",
        bankNum: "",
        openbank: ""
      }
    };
  },
  methods: {
    //返回
    goBack() {
      this.$router.back();
    },
    // 提交所有数据----请求后台
    async submit() {
      if (!this.formData.weixinNum) {
        this.$toast("请填写微信账号");
        return false;
      }
        var num =/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/; //1、可以使用6-20个子母、数字、下划线和减号 2、必须以字母开头（字母不区分大小写） 3、不能设置中文
      if (!num.exec(this.formData.weixinNum)) {
        this.$toast("请填写正确的微信账号");
        return false;
      }
       if (!this.formData.zhifubaoNum) {
        this.$toast("请填写支付宝账号");
        return false;
      }
        var num =/^(?:\w+\.?)*\w+@(?:\w+\.)+\w+|\d{9,11}$/; //支付宝账号可以是邮箱或者手机号,手机号码可能不够严谨,还可以扩展
      if (!num.exec(this.formData.zhifubaoNum)) {
        this.$toast("请填写正确的支付宝账号");
        return false;
      }
      var bankno = this.formData.bankNum;
      if (bankno == "") {
        this.$toast("请填写银行卡号");
        return false;
      }
      var num = /^\d*$/; //全数字
      if (!num.exec(bankno)) {
        this.$toast("银行卡号必须全为数字");
        return false;
      }
      if (bankno.length < 16 || bankno.length > 19) {
        this.$toast("银行卡号长度必须在16到19之间");
        return false;
      }
      //开头6位
      var strBin =
        "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
      if (strBin.indexOf(bankno.substring(0, 2)) == -1) {
        this.$toast("银行卡号开头6位不符合规范");
        return false;
      }

      let checkedInput = this.checked == true ? true : false;
      if (checkedInput == false) {
        this.$toast("请勾选条款");
      } else {
        let params = this.formData;
        const res = await this.$axios.post(this.$api.authUserInfo, params);
        if (res.success) {
          if (res.code == 1) {
            this.$toast(res.msg);
            this.$router.back();
          } else {
            this.$toast(res.msg);
          }
        } else {
          this.$toast(res.msg);
        }
      }
    }
  }
};
</script>

<style scoped>
.bankCardInfo {
  background-color: #f6f6f6;
  height: 100vh;
  width: 100%;
}
section {
  padding-top: 0.46rem;
}
section ul {
  background-color: #fff;
}
section ul li {
  border-top: 1px solid #f7f7f7;
  line-height: 0.54rem;
  overflow: hidden;
}
section ul li p {
  float: left;
  width: 30%;
  padding-left: 0.15rem;
}
section ul li input {
  float: left;
  width: 65%;
  padding-left: 0.15rem;
  border: 0;
}
.van-checkbox {
  padding: 0.27rem 0.15rem;
  display: flex;
  align-items: center;
}
.p {
  padding-left: 0.2rem;
  line-height: 0.2rem;
}
button {
  background-color: #01bf47;
  border: 0;
  width: 87%;
  line-height: 0.42rem;
  border-radius: 0.05rem;
  color: #fff;
  margin: 0 6.5%;
}
</style>
